<template>
	<div class="body-pd">
		<HeaDer></HeaDer>
		<div class="top-pd">
			<div class="row-pd">
				<div class="left-pd">
					<span style="width: 75px;">当前位置：</span>
					<el-breadcrumb separator-class="el-icon-arrow-right">
					  <el-breadcrumb-item :to="{ path: '/hp' }">首页</el-breadcrumb-item>
					  <el-breadcrumb-item :to="{ path:'/fwcpl'}">服务产品</el-breadcrumb-item>
            <el-breadcrumb-item :title="fwcpInfo.productName">{{ fwcpInfo.productName.substring(0,70)}}{{ fwcpInfo.productName.length > 70 ? '...' : '' }}</el-breadcrumb-item>
					</el-breadcrumb>
				</div>
			</div>
		</div>
		<div class="main-pd">
			<div class="row-pd">
				<div class="left-pd">
					<h1>{{fwcpInfo.productName}}</h1>
					<div class="ceng1-pd">
						<img :src="require('../../assets/images/pd-img_06.png')" alt="">
						<b>发布单位：</b>
						<span>{{fwcpInfo.organizationName}}</span>
					</div>
					<div class="ceng1-pd">
						<img :src="require('../../assets/images/pd-img_09.png')" alt="">
						<b>发布时间：</b>
						<span>{{fwcpInfo.releaseTime}}</span>
					</div>
					<div class="ceng1-pd">
						<img :src="require('../../assets/images/pd-img_06.png')" alt="">
						<b>产品类别：</b>
						<span>{{fwcpInfo.productType}}</span>
					</div>
          <div class="ceng1-pd" v-if="isBlur">
            <img :src="require('../../assets/images/pd-img_06.png')" alt="">
            <b>建立合作(查看机构信息)：</b>
            <a @click="goCooperation" target="_blank">点击跳转</a>
          </div>
					<div class="titlename-pd">
						产品介绍
					</div>
					<div class="main-txt-pd">
						{{fwcpInfo.productRemark}}
					</div>
					<div class="fujian-pd">附件：</div>
					<div class="bottom-pd" >
<!--						<a href="#" title="" v-for="item in fujian">{{item.txt}}</a>-->
            <span v-if="this.userInfo===undefined">登录后可下载</span>
            <UploadFile :upload-id="fwcpInfo.exeStandard" :business-code="UploadCode" v-if="this.userInfo!==undefined"></UploadFile>
					</div>
				</div>
        <div class="right-pd" >
          <div>
            <div class="column1-pd"  >
              <div class="title-pd">联系我们</div>
              <div class="content-pd" :class="{'blur': isBlur}">
                <div class="hang-pd">
                  <div class="left-pd">联系人：</div>
                  <div class="right-pd">{{fwcpInfo.sysDept.contacts}}</div>
                </div>
                <div class="hang-pd">
                  <div class="left-pd">电话：</div>
                  <div class="right-pd">{{fwcpInfo.sysDept.phone}}</div>
                </div>
                <div class="hang-pd" v-if="fwcpInfo.sysDept.email !== null">
                  <div class="left-pd">邮箱：</div>
                  <div class="right-pd">{{fwcpInfo.sysDept.email}}</div>
                </div>
              </div>
            </div>
            <div class="column2-pd"  >
              <div class="title-pd">机构信息</div>
              <div class="content-pd" :class="{'blur': isBlur}">
                <div class="hang-pd">
                  <div class="left-pd">机构名称：</div>
                  <div class="right-pd">{{fwcpInfo.organizationName}}</div>
                </div>
                <div class="hang-pd" :class="{'blur': isBlur}">
                  <div class="left-pd">机构性质：</div>
                  <div class="right-pd">{{fwcpInfo.sysDept.nature}}</div>
                </div>
                <div class="hang-pd" :class="{'blur': isBlur}">
                  <div class="left-pd">所属行业：</div>
                  <div class="right-pd">{{fwcpInfo.sysDept.industry}}</div>
                </div>
                <div class="hang-pd" :class="{'blur': isBlur}">
                  <div class="left-pd">所在地址：</div>
                  <div class="right-pd">{{fwcpInfo.sysDept.address}}</div>
                </div>
              </div>
            </div>
            <div class="column3-pd">
              <div class="title-pd">数字化转型规划</div>
              <div class="txt-pd">结合行业发展趋势和企业本身的发展战略去寻找转型的机会</div>
            </div>
          </div>
<!--          <button class="lock-button" @click="toggleBlur" :title="isBlur ? '取消模糊' : '开启模糊'">-->
<!--            <img src="../../assets/images/doc.png" alt="锁图标"/>-->
<!--          </button>-->
        </div>
			</div>

		</div>
		<FooTer></FooTer>
	</div>
</template>

<script>
import HeaDer from '../../components/HomePage/header'
import FooTer from '../../components/HomePage/footer'
import { publicInfo } from "@/api/qualificationInfo/qualification";
import UploadFile from "../upload/index.vue";
import {checkEnterprise} from "@/api/collaborative/management";
export default {
  dicts: ['customer_industry_serve', 'customer_industry_garden', 'enterprise_nature', 'customer_industry', 'certificate_type', 'other_type', 'sys_org_type', 'other_type'],
	data() {
		return{
      id:null,
      fwcpInfo:null,
      userInfo:null,
      UploadCode:"exeStandard",
      isBlur: true,
			breadcrumb:[
				{
					name:"首页",
					path:"{ path: '/hp' }"
				},
				{
					name:"服务产品",
					path:""
				},
				{
					name:"烟花爆竹生产企业作业场所电气设备检测服务",
					path:""
				}
			],
			title_pd:"烟花爆竹生产企业作业场所电气设备检测服务",
			unit_pd:"湖南省烟花炮竹产品安全质量监督检验醴陵授权站",
			date_pd:"2024-02-14",
			category_pd:"技术创新",
			main_txt_pd:"提供烟花爆竹喷火、组合烟花以下参数检测检验服务：接地电阻、插头插座、绝缘套管扭转试验、外壳最高表面温度。提供烟花爆竹喷火、组合烟花以下参数检测检验服务：接地电阻、插头插座、绝缘套管扭转试验、外壳最高表面温度。组合烟花以下参数检测检验服务：接地电阻、插头插座、绝缘套管扭转试验、外壳最高表面温度。提供烟花爆竹喷火、组合烟花以下参数检测检验服务：检验服务：接地电阻、插头插座、绝缘套管扭转试验、外壳最高表面温度。提供烟花爆竹喷火、组合烟花以下参数检测检验服务：接地电阻、插头插座、绝缘套提供烟花爆竹喷火、组合烟花以下参数检测检验服务：接地电阻、插头插座、绝缘套管扭转试验、外壳最高表面温度。提供烟花爆竹喷火、组合烟花以下参数检测检验服务：接地电阻、插头插座、绝缘套管扭转试验、外壳最高表面温度。组合烟花以下参数检测检验服务：接地电阻、插头插座、绝缘套管扭转试验、外壳最高表面温度。提供烟花爆竹喷火、组合烟花以下参数检测检验服务：检验服务：接地电阻、插头插座、绝缘套管扭转试验、外壳最高表面温度。提供烟花爆竹喷火、组合烟花以下参数检测检验服务：接地电阻、插头插座、绝缘套",
			fujian:[
			],
      isShow:false,
		}
	},
  mounted() {
    this.id = this.$route.query.id;
    this.publicInfo();
  },
  created() {
    this.userInfo=this.$store.state.user.token;
  },
  methods:{
    publicInfo(){
      publicInfo(this.id).then(res=>{
        this.fwcpInfo=res.data;
        console.log(this.fwcpInfo)
       if (this.userInfo!==undefined){
         checkEnterprise(this.fwcpInfo.organizationId).then(res=>{
           console.log(res)
         if (res.data>0){
            this.isBlur=true;
         }else {
            this.isBlur=false;
         }
         })
       }else {
         this.isBlur=true;
       }
      })
    },
    goCooperation(){
      this.$router.push("/operate/collaborative")
    },
    toggleBlur() {
      this.isBlur = !this.isBlur;
    }
  },
	components: {
    UploadFile,
		HeaDer,
		FooTer
	},
}
</script>

<style scoped>
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
	margin: 0;
	padding: 0;
}

ol,
ul {
	list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: 100%;
	font-weight: normal;
}
.blur {
  filter: blur(5px);
}
.lock-button {
  position: fixed;
  top: 20px; /* 根据需要调整位置 */
  right: 20px; /* 根据需要调整位置 */
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 1000; /* 确保按钮在最上面 */
}

.lock-button img {
  width: 40px; /* 根据需要调整图标大小 */
  height: auto;
}
.body-pd{
	height: 100%;
	width:100%;
	font-size: 14rem;
	font-family:PingFang SC,Microsoft YaHei,Arial, sans-serif;
	color: #384a66;
}
.row-pd{
	width:1532rem;
	margin: 0 auto;
}
.top-pd{
	width:100%;
	height:64rem;
	background-color: #f8f9fb;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
	box-shadow: 1rem 3rem rgba(0, 0, 0, .03);
}
.top-pd>.row-pd>.left-pd{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
	font-size: 14px;
}
.main-pd>.row-pd{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	justify-content: space-between;
	padding-top: 45rem;
	padding-bottom: 166rem;
}
.main-pd>.row-pd>.left-pd{
	width: 1053rem;
}
.main-pd>.row-pd>.left-pd>h1{
	font-size: 24rem;
	margin-bottom: 30rem;
	line-height: 36rem;
}
.main-pd>.row-pd>.left-pd>.ceng1-pd{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
	margin-top:12rem;
}
.main-pd>.row-pd>.left-pd>.ceng1-pd>img{
	width: 16rem;
	height: 16rem;
	margin-right: 10rem;
}
.main-pd>.row-pd>.left-pd>.ceng1-pd>b{
	font-weight: 500;
}
.titlename-pd{
	background: url(../../assets/images/pd-img_12.png) no-repeat scroll;
	background-position: bottom;
	display: inline-block;
	padding-bottom: 20rem;
	margin-top: 30rem;
}
.main-txt-pd{
	margin-top: 20rem;
	line-height: 32rem;
}
.fujian-pd{
	padding-top: 40rem;
	padding-bottom: 10rem;
}
.main-pd>.row-pd>.left-pd>.bottom-pd{
	background-color: #eef5f0;
	padding: 22rem 30rem;
}
.main-pd>.row-pd>.left-pd>.bottom-pd>a{
	color:#35a266 ;
	display: block;
	line-height: 30rem;
}
.column1-pd{
	width: 410rem;
	border-radius: 5rem;
	/* overflow: hidden; */
	margin-bottom: 42rem;
}
.column1-pd>.title-pd{
	width: 100%;
	height: 50rem;
	background: linear-gradient(to right, #35a266, #2dc956);
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
	padding-left: 30rem;
	font-size: 16rem;
	color: white;
	border-top-left-radius: 5rem;
	border-top-right-radius: 5rem;
}
.column1-pd>.content-pd{
	width: 100%;
	height:148rem;
	background:url(../../assets/images/pd-img_03.png) no-repeat scroll;
	background-size: 100% 100%;
	padding: 32rem 30rem;
	border-bottom-left-radius: 5rem;
	border-bottom-right-radius: 5rem;
	box-shadow: 0 0 5rem 0 rgba(0, 0, 0, .15);
}
.column1-pd>.content-pd>.hang-pd{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	line-height: 30rem;
}
.column2-pd{
	width: 410rem;
	border-radius: 5rem;
	margin-bottom: 42rem;
}
.column2-pd>.title-pd{
	width: 100%;
	height: 50rem;
	background: linear-gradient(to right, #35a266, #2dc956);
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
	padding-left: 30rem;
	font-size: 16rem;
	color: white;
	border-top-left-radius: 5rem;
	border-top-right-radius: 5rem;
}
.column2-pd>.content-pd{
	width: 100%;
	height:231rem;
	background:url(../../assets/images/pd-img_15.png) no-repeat scroll;
	background-size: 100% 100%;
	padding: 32rem 30rem;
	border-bottom-left-radius: 5rem;
	border-bottom-right-radius: 5rem;
	box-shadow: 0 0 5rem 0 rgba(0, 0, 0, .15);
}
.column2-pd>.content-pd>.hang-pd{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	line-height: 30rem;
}
.hang-pd>.left-pd{
	white-space: nowrap;
}
.ceng1-pd a {
  text-decoration: underline; /* 添加下划线 */
  color: blue; /* 设置链接颜色（可选） */
}
.column3-pd{
	width:423rem;
	height: 194rem;
	background:url(../../assets/images/pd-img_18.png) no-repeat scroll;
	background-size: 100% 100%;
	padding-top: 52rem;
	padding-left: 35rem;
	color: white;
}
.column3-pd>.title-pd{
	font-size: 30rem;
	font-weight: bold;
	margin-bottom: 15rem;
}
.column3-pd>.txt-pd{
	width:224rem;
	word-wrap: break-word;
	line-height: 24rem;
}
</style>
